<template>
	<view class="selection">
		<view class="selection-push">
			<view class="selection-push-title">人气推荐</view>
			<view class="selection-push-commodity">
				<view class="goods-group">
					<view class="goods-group-list" v-for="(item, index) in hotGoodsList" @click="jump(item.id)">
						<view class="goods-img"><image :src="item.picUrl" mode=""></image></view>
						<view class="goods-right">
							<view class="goods-right_title ">{{ item.brief }}</view>

							<view class="goods-right_role">{{ item.name }}</view>
							<view class="goods-right_price">
								<text style="color: #F9AE3D;">￥{{ item.retailPrice }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="selection-select">
			<view class="selection-select-title">专题精选</view>
			<scroll-view class="scroll-view_H" scroll-x="true" show-scrollbar="true" scroll-top='100' scroll-with-animation='true'>
				<view class="selection-push-commodity">
					<!-- <uni-card class="push-commodity" :cover="item.picUrl" v-for="(item, index) in topicList">
						<text>
							{{ item.title }}
							<text>￥{{ item.price }}</text>
						</text>
						<view class="">{{ item.subtitle }}</view>
					</uni-card> -->
					<view class="selection-commodity" v-for="(item, index) in topicList">
						<image :src="item.picUrl" mode=""></image>
						<view>
							<text >
								{{ item.title }}
								<text class="price">￥{{ item.price }}</text>
							</text>
					 </view>
						<view class="subtitle">{{ item.subtitle }}</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="" v-for="(item, index) in floorGoodsList">
			<view class="brand-title">{{ item.name }}</view>
			<view class="newProduct">
				<u-grid :border="false"  col="2">
					<u-grid-item v-for="(baseListItem, baseListIndex) in item.goodsList" :key="baseListItem.id" @click="jump(baseListItem.id)">
						<view class="image-box"><image class="_imgs" :src="baseListItem.picUrl" mode=""></image></view>
						<view class="newProduct-text ">
							<text class="newProduct-title">{{ baseListItem.name }}</text>
							<view class="newProduct-price">{{ baseListItem.retailPrice }}元起</view>
						</view>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Selection',
	props: ['hotGoodsList', 'topicList', 'floorGoodsList'],
	data() {
		return {};
	},
	methods: {
		click(name) {
			this.$refs.uToast.success(`点击了第${name}个`);
		},
		scroll: function(e) {
			console.log(e);
			this.old.scrollTop = e.detail.scrollTop;
		},
		left() {
			console.log('left');
		},
		right() {
			console.log('right');
		},
		//传id到详情
		jump(index){
			uni.navigateTo({
				url:'../../pages/productDetails/productDetails?id='+index
			})
		}
	},
	
};
</script>

<style lang="scss" scoped>
.selection {
	.selection-push-title,
	.selection-select-title,
	.brand-title {
		text-align: center;
		padding: 20rpx 0;
	}
	//人气推荐
	.selection-push {
		.selection-push-commodity {
			.goods-group {
				.goods-group-list {
					display: flex;
					justify-content: space-around;
					width: 95%;
		            border-bottom: 2px solid #cdd2d9;
				    margin: 0 auto;
					.goods-img image {
						width: 150rpx;
						height: 150rpx;
					}
					view {
						padding: 15rpx 0;
					}
					.goods-right {
						
						width: 55%;
						.goods-right_title {
							color: #45474a;
							.text {
								background-color: #1989fa;
								color: #ffffff;
							}
						}

						.goods-right_role {
							color: #adadb0;
							font-size: 25rpx;
						}
						.goods-right_price {
							.line_through {
								text-decoration: line-through;
								color: #adadb0;
								margin-right: 50rpx;
							}
						}
					}
				}
			}
		}
	}
	//专题精选
	.selection-select {
		.scroll-view_H {
			.selection-push-commodity {
				height: 40vh;
				display: flex;
				flex-direction: row;
				white-space: nowrap;
			  

				.selection-commodity {
					display: inline-block;
					padding:0 40rpx;
					width: 800rpx;

					image {
						
						width:90vw;
						height: 405rpx;
					}
					view {
						overflow: hidden;
						text-overflow: ellipsis;
						width: 80vw;
						.price{
							color: #ED6A0C;
						}
					}
				}
			}
		}
	}
	//居家 饮食  餐厨 配件
	.newProduct {
		margin: 55rpx;
		.image-box {
			height: 200rpx;
			._imgs {
				width: 200rpx;
				height: 190rpx;
			}
		}

		.newProduct-text {
			margin: 10px;
			.newProduct-title {
				width: 50vw;
				overflow: hidden;
				white-space: nowrap;
				font-size:20rpx;
			}
			.newProduct-price {
				font-size: 20rpx;
				color: #f56723;
				text-align: center;
			}
		}
	}
}
</style>
